<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./lb.css">
<script src="./js/jquery.js"></script>
<link rel="stylesheet" href="./font/iconfont.css">
<body>

        <div class="head">
            <div class="common">
               <ul class="head-nav1">
                   <li><a href="" style="padding:0 7px ;">手机逛淘宝</a></li>
                   <li><a href="">网页无障碍</a></li>
               </ul>
               <ul class="head-nav2">
                   <li><a href="./list.html">淘宝网主页</a></li>
                   <li><div class="site-nav-menu-hd"><a href=""  style="padding: 0 6px;">我的淘宝<span class="iconfont">&#xe79a;</span></a></div>
                    <div class="site-nav-menu-bd">
                        <ol><li><a href="">已买到的宝贝</a></li>
                        <li><a href="">我的足迹</a></li>
                        </ol>
                    </div>
                   </li>
                   <li><a href="./gwc.html"><i class="h"><span class="iconfont">&#xe70c;</span></i> 购物车</a></li>
                   <li><div class="site-nav-menu-hd"><a href=""><span class="iconfont">&#xe8c6;</span>收藏夹<span class="iconfont">&#xe79a;</span></a> </div>
                    <div class="site-nav-menu-bd">
                    <ol>
                     <li><a href="">收藏的宝贝</a></li>
                     <li><a href="">收藏的店铺</a></li>
                   </ol></div>
                    </li>
                   <li><a href="">商品分类</a></li> 
                   <li><a href="">免费开店</a></li><li><span class="l">|</span></li>
                   <li><div class="site-nav-menu-hd"><a href="">千牛卖家中心<span class="iconfont">&#xe79a;</span></a></div>
                    <div class="site-nav-menu-bd"><ol>
                       <li><a href="">开店入驻</a></li>
                       <li><a href="">已卖出的宝贝</a></li>
                       <li><a href="">出售中的宝贝</a></li>
                       <li><a href="">卖家服务市场</a></li>
                       <li><a href="">卖家培训中心</a></li>
                       <li><a href="">体检中心</a></li>
                       <li><a href="">电商学习中心</a></li>
                     </ol></div> 
                   </li>
                   <li><div class="site-nav-menu-hd"><a href="">联系客服<span class="iconfont">&#xe79a;</span></a></div>
                    <div class="site-nav-menu-bd"><ol>
                     <li><a href="">消费者客服</a></li>
                     <li><a href="">卖家客服</a></li>
                   </ol></div>
                   </li>
               </ul>
            </div>
            </div>
        <ul class="list1">
    
        </ul>
        <div class="fenye">

       </div>


       <div class="fotter">
        <ul>
          <li><a href="//page.1688.com/shtml/about/ali_group1.shtml">阿里巴巴集团</a></li>
          <li>|</li>
          <li><a href="//www.alibaba.com">阿里巴巴国际站</a></li>
          <li>|</li>
          <li><a href="//www.1688.com">阿里巴巴中国站</a></li>
          <li>|</li>
          <li><a href="//www.aliexpress.com">全球速卖通</a></li>
          <li>|</li>
          <li><a href="//www.taobao.com">淘宝网</a></li>
          <li>|</li>
          <li><a href="//www.tmall.com">天猫</a></li>
          <li>|</li>
          <li><a href="//ju.taobao.com">聚划算</a></li>
          <li>|</li>
          <li><a href="//www.etao.com">一淘</a></li>
          <li>|</li>
          <li><a href="//www.alimama.com">阿里妈妈</a></li>
          <li>|</li>
          <li><a href="//www.aliyun.com">阿里云计算</a></li>
          <li>|</li>
          <li><a href="//www.yunos.com">云OS</a></li>
          <li>|</li>
          <li><a href="//wanwang.aliyun.com">万网</a></li>
          <li>|</li>
          <li><a href="//www.alipay.com">支付宝</a></li>
          <li>|</li>
        </ul>
        <ol>
          <li><a href="//huodong.taobao.com/wow/tbhome/act/about-home">关于淘宝</a></li>
          <li><a href="//www.taobao.com/about/partners.php">合作伙伴</a></li>
          <li><a href="//pro.taobao.com">营销中心</a></li>
          <li><a href="//service.taobao.com/support/main/service_route.htm">联系客服</a></li>
          <li><a href="//open.taobao.com">开放平台</a></li>
          <li><a href="//www.taobao.com/about/join.php">诚征英才</a></li>
          <li><a href="//consumerservice.taobao.com/contact-us">联系我们</a></li>
          <li><a href="//www.taobao.com/sitemap.php">网站地图</a></li>
          <li><a href="//terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201703241622_61002.html">法律声明及隐私权政策</a></li>
          <li class="last">© 2022 Taobao.com 版权所有</li>
        </ol>
        <ol class="lastul">
          <li>网络文化经营许可证：
            <a href="//img.alicdn.com/tps/i4/T1ysdvXtNeXXcPpEkQ-972-636.jpg">文网文[2010]040号</a>
          </li>
          <li>|</li>
          <li>增值电信业务经营许可证：浙B2-20080224-1</li>
          <li>|</li>
          <li>信息网络传播视听节目许可证：1109364号</li>
        </ol>
            
      </div>


</body>
<script src="./js/utils.js"></script>
<script src="./js/page.js"></script>
<script>
var ul = document.querySelector('.list1');
var fenye = document.querySelector('.fenye');
var current = 1
requestData()
function requestData() {
    // 发送ajax请求获取商品列表数据
    sendAjax({
        url: 'http://localhost:8888/goods/list',
        data: {
            current
        },
        success: res => {
            console.log(res);
            var {code, list, total} = res;
            if(code === 1) {
                // 数据获取成功
                // 渲染
                var str = ''
                list.forEach(v => {
                    str += `
                        <li>
                            <a href="xqy.html?id=${v.goods_id}">
                                <img src="${v.img_big_logo}" alt="">
                                <span class="price">￥${v.price}</span>
                                <br>
                                <span class="title">${v.title}</span>
                            </a>
                        </li>
                    `
                })
                ul.innerHTML = str
                // 根据当前数据和当前页动态渲染分页
                var pageStr = `
                    <div class="first" onclick="first()">首页</div>
                    <div class="prev" onclick="prev()">上一页</div>
                    <div class="list">
                `
                if(total<=5) {
                    // 1~总页数
                    pageStr += createP(1, total)

                } else {
                    if(current <= 3) {
                        pageStr += createP(1, 5)
                    } else if(current >= total - 2) {
                        pageStr += createP(total-4, total)
                    } else {
                        pageStr += createP(current-2, current+2)
                    }
                }
                pageStr += `
                    </div>
                    <div class="next" onclick="next(${total})">下一页</div>
                    <div class="last" onclick="last(${total})">尾页</div>
                `
                fenye.innerHTML = pageStr
            }
        }
    })
}
// 点击上一页的函数
function prev() {
    current--
    if(current < 1) {
        current = 1
        return
    }
    requestData()
}
// 点击首页的函数
function first() {
    if(current === 1) {
        return
    }
    current = 1
    requestData()
}
// 点击尾页的函数
function last(total) {
    if(current === total) {
        return
    }
    current = total
    requestData()
}
// 点击下一页的函数
function next(total) {
    current++
    if(current > total) {
        current = total
        return
    }
    requestData()
}
// 点击页码的函数
function toCurrent(i) {
    if(current === i) {
        return
    }
    current = i
    requestData()
}
// 创建页码p标签的函数
function createP(start, end) {
    var str = ''
    for(var i=start; i<=end; i++) {
        if(i === current) {
            str += `
                <p onclick="toCurrent(${i})" class="active">${i}</p>
            `
        } else {
            str += `
                <p onclick="toCurrent(${i})">${i}</p>
            `
        }
    }
    return str
}
</script>
</html>